import { Device } from "@/api/interface/iot";
import { licenseAuthority, licenseAuthorityRefuse, licenseMachine } from "@/api/modules/system/license";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { licenseStatusType } from "@/enums/dictEnum";
import "./index.scss";
import { showTips, confirm } from "@/utils/util";
import { useRoute } from "vue-router";
import BasicDialog from "./components/basicDialog";
import DialogBox from "@/components/DialogBox";
import JsonEditerVue from "@/components/JsonForm/JsonEditer.vue";
export default defineComponent({
	setup() {
		const route = useRoute();
		const initParam = reactive<Device.ReqProduct>({ pageIndex: 1, pageSize: 20, machineId: route.query.machineId });
		const proTable = ref<any>();

		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};

		const getTableList = async (params: any) => {
			return licenseAuthority(params);
		};
		const btnList = ref<any>([]);
		onMounted(async () => {
			// 获取页面按钮权限
			btnList.value = await useAuthButtons();
		});
		const clickBtn = async (fn: string, row: any) => {
			switch (fn) {
				case "detail":
					detailDialog.detail = row;
					detailDialog.visible = true;
					break;
				case "refuse":
					confirm({ content: "是否驳回授权" }).then(async (flag: any) => {
						if (!flag) {
							return;
						}
						refuseLicense(row);
					});
					break;
			}
		};
		const refuseLicense = async (row: any) => {
			let { code, message } = await licenseAuthorityRefuse({ id: row.id });
			let ok = showTips(code, "驳回授权", message);
			if (ok) {
				proTable.value.getTableList();
			}
		};
		// 表格配置项
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "machineId", label: "机器ID", search: { el: "input" } },
			{ prop: "appName", label: "应用" },
			{ prop: "appKey", label: "应用标识" },
			{ prop: "authorityItemName", label: "授权项", width: 120 },
			{ prop: "authorityItemValue", label: "授权内容", width: 160 },
			{ prop: "addInfo", label: "备注", width: 160 },
			{ prop: "status", label: "授权状态", width: 120 },
			{ prop: "updateTime", label: "授权时间", width: 260 },
			{ prop: "operation", label: "操作", width: 100 }
		];
		const detailDialog = reactive<any>({
			title: "同意授权",
			detail: {},
			visible: false
		});
		const sysInfoDialog = reactive<any>({
			title: "系统信息",
			detail: {},
			visible: false
		});

		const geiSysInfo = async (row: any) => {
			let { result, code } = await licenseMachine({ machineId: row.machineId });
			if (code == 200 && result.records.length) {
				sysInfoDialog.detail = result.records[0];
				sysInfoDialog.detail.sysInfo = JSON.stringify(sysInfoDialog.detail.sysInfo);
				sysInfoDialog.visible = true;
			}
		};
		return () => {
			return (
				<div class="authority-page">
					<DialogBox v-model:visible={sysInfoDialog.visible} width="900" title={sysInfoDialog.title} hideFooter>
						<el-descriptions border>
							<el-descriptions-item label="名字">{sysInfoDialog.detail.name || "--"}</el-descriptions-item>
							<el-descriptions-item label="操作系统">{sysInfoDialog.detail.os || "--"}</el-descriptions-item>
							<el-descriptions-item label="主机名">{sysInfoDialog.detail.hostname || "--"}</el-descriptions-item>
							<el-descriptions-item label="IP">{sysInfoDialog.detail.ip || "--"}</el-descriptions-item>
							<el-descriptions-item label="CPU架构">{sysInfoDialog.detail.arch || "--"}</el-descriptions-item>
						</el-descriptions>
						<JsonEditerVue v-model:data={sysInfoDialog.detail.sysInfo} class="flex-1" style="height:600px;width:100%" />
					</DialogBox>
					<BasicDialog
						width="400px"
						title={detailDialog.title}
						v-model:visible={detailDialog.visible}
						detail={{ ...detailDialog.detail.authorityItem, id: detailDialog.detail.id }}
						onSubmit={() => {
							detailDialog.visible = false;
							proTable.value.getTableList();
						}}
					></BasicDialog>
					<ProTable
						ref={proTable}
						title={btnList.value.length ? "" : "授权申请"}
						columns={columns}
						requestApi={getTableList}
						initParam={initParam}
						showHeader={false}
						searchCol={4}
						dataCallback={dataCallback}
					>
						{{
							tableHeader: (scope: any) => {
								return btnList.value?.map((item: any) => {
									return (
										<el-button onClick={() => clickBtn(item.path, scope.row)} type={item.btnClass}>
											<i class={`iconfont ${item.icon}`}></i>
											{item.menuName}
										</el-button>
									);
								});
							},
							machineId: (scope: any) => {
								return (
									<div
										class="truncate cursor-pointer primary-color"
										title="查看详情"
										onClick={() => {
											geiSysInfo(scope.row);
										}}
									>
										{scope.row.machineId}
									</div>
								);
							},
							authorityItemName: (scope: any) => {
								return scope.row.authorityItem.name || "--";
							},
							authorityItemValue: (scope: any) => {
								return scope.row.authorityItem.value || "--";
							},
							status: (scope: any) => {
								let licenseStatus = licenseStatusType.filter((item: any) => item.value == scope.row.status);
								return <el-tag type={licenseStatus[0].type}>{licenseStatus[0].label}</el-tag>;
							},
							operation: (scope: any) => {
								return (
									<div class="flex">
										<el-link
											type="primary"
											link
											onClick={() => {
												clickBtn("detail", scope.row);
											}}
											disabled={scope.row.status != "unauthorized"}
										>
											同意
										</el-link>
										<el-link
											type="danger"
											link
											onClick={() => {
												clickBtn("refuse", scope.row);
											}}
											disabled={scope.row.status != "unauthorized"}
										>
											驳回
										</el-link>
									</div>
								);
							}
						}}
					</ProTable>
				</div>
			);
		};
	}
});
